<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<style type="text/css">
body { margin: 0; padding: 0;}
div {
   font: 12px Arial;
}

span.bold { font-weight: bold; }

#div1 {
   opacity: 0.8;
   filter: alpha(opacity=80);
   position: absolute;
   width: 150px;
   height: 200px;
   top: 10px;
   left: 470px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}
#div2, #div2B {
   margin: 0px 10px 0px 20px;
   float: left;
   width: 150px;
   height: 200px;
   border: 1px solid #009900;
   background-color: #ccffcc;
   text-align: center;
   
   /*margin-right: -50px; /* IE float bug, hack to get elements to overlap */ /* need to do this if #div3 or #div4 hasLayout */
}
#div5, #div5B {
   margin: -160px 20px 0px 10px;
   float: right;
   width: 150px;
   height: 200px;
   border: 1px solid #009900;
   background-color: #ccffcc;
   text-align: center;
   
    /*margin-left: -50px; /* IE float bug, hack to get elements to overlap */ /* need to do this if #div3 or #div4 hasLayout */
}
#div2B, #div5B { opacity: 0.8; width: 70px; margin-left: 5px; margin-right: 5px; border-style: dashed; filter:alpha(opacity=80);}
#div3, #div4 {
   padding:10px 0 10px 210px;
   border: 1px solid #999966;
   background-color: #ffffcc;
   margin: 0px 10px 0px 10px;
   text-align: left;
}
#div3 {margin-top:10px; }
#div4 {
   opacity: 0.8;
   margin-top: 10px;
   border-style: dashed;
}
#div6 {
   opacity: 0.8;
   filter: alpha(opacity=80);
   position: absolute;
   width: 150px;
   height: 100px;
   top: 140px;
   left: 60px;
   border: 1px dashed #990000;
   background-color: #ffdddd;
   text-align: center;
}
#div7, #div0 {
	background-color: #BFC6FF;
	border: 1px solid #1D2E9F;
	text-align: center;
	position:absolute;
	z-index: -1;
	width: 150px;
	height: 200px;
	top:5px;
	left:330px;
}
#div0 {
	left: 250px;
}
</style>

<!--[if IE]>
<style type="text/css">
#div4 { visibility: hidden; }
</style>
<![endif]-->
</head>

<body>

<br /><br />

<div id="div0">
<br /><span class="bold">DIV #0</span>
<br />position: absolute; 
<br/> z-index: -1;
</div>

<div id="div1">
<br /><span class="bold">DIV #1</span>
<br />position: absolute;
<br />opacity: 0.8;
</div>

<div id="div2">
<br /><span class="bold">DIV #2</span>
<br />float: left;
</div>


<div id="div2B" >
<br /><span class="bold">DIV #2B</span>
<br />float: left;
<br />opacity: 0.8;
</div>


<br />

<div id="div3">
<span class="bold">DIV #3</span>
<br />no positioning
</div>

<div id="div4">
<span class="bold">DIV #4</span>
<br />no positioning
<br />opacity: 0.8;
</div>


<div id="div5">
<br /><span class="bold">DIV #5</span>
<br />float: right;
</div>


<div id="div5B">
<br /><span class="bold">DIV #5B</span>
<br />float: right;
<br />opacity: 0.8;
</div>

<div id="div6">
<br /><span class="bold">DIV #6</span>
<br />position: absolute;
<br />opacity: 0.8;
</div>

<div id="div7">
<br /><span class="bold">DIV #7</span>
<br />position: absolute; 
<br/> z-index: -1;
</div>

<script src="../dist/zviz.dist.js" type="text/javascript"></script>

</body></html>